<template>
  <div id="nav">
    <div>
      <van-button style="background: transparent; border: none; height: 30px" icon="wap-nav" @click.stop="open" />
      <!-- <img src="@/assets/img/nav.png"  @click.stop="open" alt="" /> -->
      <img src="@/assets/img/world.png" alt="" />
    </div>
    <div>
      <template v-if="hastoken && coinType">
        <el-dropdown popper-class="dropdown" @command="command" trigger="click">
          <div class="price">
            <template v-if="coinType == 'BRL'">
              <div>
                <img v-lowlazy="getImg('mylrft.png')" alt="" />
                <span>R$ {{ $dot(coininfo[coinType.toLowerCase()]['totalCoins']) }}</span>
              </div>
            </template>
            <template v-else>
              <div>
                <img v-lowlazy="getImg('t1.png')" alt="" />
                <span>USDT {{ $dot(coininfo[coinType.toLowerCase()]['totalCoins']) }}</span>
              </div>
            </template>
            <van-icon name="plus" color="#fff" size="14" />
          </div>
          <template #dropdown>
            <div class="tipsdropdown" :class="istouch ? 'opcity' : ''" @touchmove="distance">
              <span>{{ $t("language.My.selectTips") }}</span>
              <el-icon @click="openSelectdialogs">
                <QuestionFilled />
              </el-icon>
            </div>
            <el-dropdown-menu class="dropdown">
              <el-dropdown-item command="BRL">
                <div class="itemdropdown" :class="coinType == 'BRL' ? 'activedown' : ''">
                  <img src="@/assets/img/mylrft.png" alt="" />
                  <strong>BRL</strong>
                  <div> {{ $dot(coininfo['brl']['totalCoins']) }}</div>
                </div>
              </el-dropdown-item>
              <el-dropdown-item command="USDT">
                <div class="itemdropdown" :class="coinType == 'USDT' ? 'activedown' : ''">
                  <img src="@/assets/img/t1.png" alt="" />
                  <strong>USDT</strong>
                  <div> {{ $dot(coininfo['usdt']['totalCoins']) }}</div>
                </div>
              </el-dropdown-item>
              <el-dropdown-item :command="coinType">
                <van-button class="money" @click="$openPage('/wallet')">{{ $t("language.nav.moenydetail")
                  }}</van-button>
              </el-dropdown-item>

            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="reca" @click="$openPage('/rechange')">
          {{ $t("language.home.eroll") }}
        </div>
      </template>
      <template v-else>
        <span @click.stop="openlogin('eroll')"> {{ $t("language.home.eroll") }}</span>
        <span @click.stop="openlogin('login')">{{ $t("language.home.login") }}</span>
      </template>
    </div>
  </div>
  <div :class="['mark', opennav ? 'markwidth' : '']" ref="expends">
    <template v-if="opennav">
      <div class="div">
        <div class="logo">
          <img src="@/assets/img/world.png" alt="" />
        </div>
        <dl>
          <dd v-for="(item, index) in navlist" :key="index" @click.stop="item.callback(index, item)">
            <div class="top" @mouseenter="item.hover = true" @mouseleave="item.hover = false" :style="{
        'background-color': item.open ? '#1a1a1a' : 'rgb(32, 34, 38)',
      }">
              <div>
                <img :src="item.imghover" v-if="item.open || item.hover" alt="" />
                <img :src="item.img" v-else alt="" />
                <span :class="item.open || item.hover ? 'active' : ''">{{
        $t(item.lang)
      }}</span>
              </div>
              <van-icon v-if="item.children.length != 0" name="arrow-down" :class="item.open ? 'rotate' : ''"
                color="rgb(152, 167, 181)" size="12" />
              <span v-else></span>
            </div>
            <ul :class="['children']" :style="{
        height: item.open ? item.children.length * 40 + 'px' : '0px',
      }">
              <li v-for="(items, index) in item.children" :key="item.lang + index"
                @click.stop="items.callback(item.lang + index)" @mouseenter="activechildren = item.lang + index"
                @mouseleave="activechildren = ''">
                <div>
                  <img v-if="activechildren != item.lang + index" :src="items.img" alt="" />
                  <img v-else :src="items.imghover" alt="" />
                  <span :class="activechildren == item.lang + index ? 'activechild' : ''
        ">{{ $t(items.lang) }}</span>
                </div>
                <span></span>
              </li>
            </ul>
          </dd>
        </dl>
        <div class="change" @click="$openPage('/language')">
          <div>
            <img src="@/assets/img/lang.png" alt="" /><span>{{
        $t("language.nav.change.change1")
      }}</span>
          </div>
          <div>
            <span>{{ lang.name }}</span>
            <van-icon name="arrow" class="icon" color="rgb(152, 167, 181)" size="12" />
          </div>
        </div>
      </div>
    </template>
  </div>
  <template v-if="opennav">
    <Terouro ref="Terouros" />
  </template>
  <rank ref="tablec" />
  <selectdialog :fullscreen="true" ref="selectdialogs" />
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  defineAsyncComponent,
  defineProps,
  defineEmits,
  onActivated,
  computed
} from "vue";
import router from "@/router/index.ts";
import { useStore } from "vuex";
const store = useStore();
let info: any = computed(() => store.state.info)
let rank = defineAsyncComponent(() => import("@/components/rank.vue"));
let Terouro = defineAsyncComponent(() => import("@/components/Terouro.vue"));
let selectdialog = defineAsyncComponent(
  () => import("@/views/My/component/selectdialog.vue")
);
// 获取语言信息
let lang = computed(() => store.state.lang)
//滑动
let istouch = ref(false)
let distance = () => {
  istouch.value = true
}
//获取金钱信息和金钱类型
let coinType = computed(() => store.state.coinType)
let coininfo = computed(() => store.state.coininfo)
// let info: any = reactive({});
// info = JSON.parse(localStorage.getItem("info"));
// 判断是否登录
let hastoken = computed(() => store.state.token ? true : false);
let opennav = ref(false);
let Terouros = ref(null);
let tablec = ref(null);
let openTerouro = () => {
  Terouros.value.opent();
};
let emit = defineEmits(["openturn", "openlogin"]);
let openlogin = (val) => {
  store.commit("SET_LOGIN", true);
  store.commit("SET_LOGINOREROLL", val);
};
const getImg = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href;
};
let selectdialogs = ref(null);
let openSelectdialogs = () => {
  console.log(selectdialogs.value, 999);
  selectdialogs.value.open();
};
onActivated(() => {
  if (info.value == null) return
  store.dispatch('GetUserInfo', info.value).then(({ data }) => {
    if (data.code == 0) {
      store.commit('SET_COININFO', data.data.accounts)
      localStorage.setItem('coininfo', JSON.stringify(data.data.accounts))
    }
  })

})
let open = () => {
  opennav.value = true;
};

let money = ref("BRL");
let activechildren = ref("");
let command = (val) => {
  console.log(val);
  // money.value = val;
  localStorage.setItem('coinType', val)
  store.commit("SET_COINTYPE", val);
};
// let openlogin = (val: string) => {
//   emit("openlogin", val);
// };
defineExpose({
  opennav,
});
let navlist = reactive([
  {
    lang: "language.nav.nav1",
    img: getImg("nav1.gif"),
    imghover: getImg("nav1.gif"),
    name: "",
    open: false,
    hover: false,
    callback: (index, item): void => {
      navhover(index);
      emit("openturn", true);
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    children: [],
  },
  {
    lang: "language.nav.nav2",
    img: getImg("nav2.png"),
    imghover: getImg("nav2.png"),
    name: "",
    hover: false,
    open: false,
    children: [],
    callback: (index, item) => {
      navhover(index);
      openTerouro();
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
  },
  {
    lang: "language.nav.nav3",
    img: getImg("nav3.png"),
    imghover: getImg("nav3l.png"),
    name: "",
    hover: false,
    open: false,
    callback: (index, item) => {
      navhover(index);
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    children: [
      {
        lang: "language.nav.nav3children1",
        img: getImg("nav3-1.png"),
        imghover: getImg("nav3-1l.png"),
        hover: false,
        name: "",
        callback: (index) => {
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children2",
        img: getImg("nav3-2.png"),
        imghover: getImg("nav3-2l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children3",
        img: getImg("nav3-3.png"),
        imghover: getImg("nav3-3l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "Hot Game" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children4",
        img: getImg("nav3-4.png"),
        imghover: getImg("nav3-4l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "History" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children5",
        img: getImg("nav3-5.png"),
        imghover: getImg("nav3-5l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "Slot" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children6",
        img: getImg("nav3-6.png"),
        imghover: getImg("nav3-6l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "Live Casino" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children7",
        img: getImg("nav3-7.png"),
        imghover: getImg("nav3-7l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "Board" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children8",
        img: getImg("nav3-8.png"),
        imghover: getImg("nav3-8l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "Fishing" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children9",
        img: getImg("nav3-9.png"),
        imghover: getImg("nav3-9l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "SlotHash" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children10",
        img: getImg("nav3-10.png"),
        imghover: getImg("nav3-10l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "SlotTime" } });
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav3children11",
        img: getImg("nav3-11.png"),
        imghover: getImg("nav3-11l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push({ path: "/commonpage", query: { name: "SlotChain" } });
          opennav.value = false;
          activechildren = index;
        },
      },
    ],
  },
  {
    lang: "language.nav.nav4",
    img: getImg("nav4.png"),
    imghover: getImg("nav4l.png"),
    open: false,
    hover: false,
    name: "",
    callback: (index, item) => {
      navhover(index);
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    children: [
      {
        lang: "language.nav.nav4children1",
        img: getImg("nav4-1.png"),
        imghover: getImg("nav4-1l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav4children2",
        img: getImg("nav4-2.png"),
        imghover: getImg("nav4-2l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav4children3",
        img: getImg("nav4-3.png"),
        imghover: getImg("nav4-3l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav4children4",
        img: getImg("nav4-4.png"),
        imghover: getImg("nav4-4l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav4children5",
        img: getImg("nav4-5.png"),
        imghover: getImg("nav4-5l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          opennav.value = false;
          activechildren = index;
        },
      },
    ],
  },
  {
    lang: "language.nav.nav5",
    img: getImg("nav5.png"),
    imghover: getImg("nav5l.png"),
    open: false,
    hover: false,
    name: "",
    callback: (index) => {
      navhover(index);
    },
    children: [
      {
        lang: "language.nav.nav5children1",
        img: getImg("nav5-1.png"),
        imghover: getImg("nav5-1l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          router.push("/Star");
          opennav.value = false;
          activechildren = index;
        },
      },
      {
        lang: "language.nav.nav5children2",
        img: getImg("nav5-2.png"),
        imghover: getImg("nav5-2l.png"),
        name: "",
        hover: false,
        callback: (index) => {
          tablec.value.open();
          opennav.value = false;
          activechildren = index;
        },
      },
    ],
  },
  {
    lang: "language.nav.nav6",
    img: getImg("nav6.png"),
    imghover: getImg("nav6l.png"),
    hover: false,
    callback: (index, item) => {
      navhover(index);
      router.push("/business");
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav7",
    imghover: getImg("nav7l.png"),
    img: getImg("nav7.png"),
    hover: false,
    callback: (index, item) => {
      navhover(index);
      router.push("/task");
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav8",
    imghover: getImg("nav8l.png"),
    img: getImg("nav8.png"),
    hover: false,
    callback: (index, item) => {
      navhover(index);
      router.push("/vip");
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav9",
    imghover: getImg("nav9l.png"),
    img: getImg("nav9.png"),
    hover: false,
    callback: (index, item) => {
      navhover(index);

      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    open: false,
    name: "",
    children: [],
  },
  {
    lang: "language.nav.nav10",
    imghover: getImg("nav10l.png"),
    img: getImg("nav10.png"),
    hover: false,
    callback: (index, item) => {
      navhover(index);
      router.push("/download");
      if (item.children.length == 0) {
        opennav.value = false;
      }
    },
    open: false,
    name: "",
    children: [],
  },
]);
let navhover = (index: number): void => {
  navlist = navlist.map((i, id) => {
    if (id != index) {
      i.open = false;
      i.hover = false
    }
    return i;
  });


  navlist[index]["open"] = !navlist[index]["open"];
  navlist[index]["hover"] = !navlist[index]["hover"];
  console.log(navlist.map((i) => i.open), 'navlist');
};
</script>
<style lang="scss">
.dropdown .el-scrollbar__wrap {
  width: 250px !important;
  border: none !important;
}

.dropdown .el-popper {
  border: none !important;
}

.dropdown .el-dropdown__list {
  box-shadow: none !important;
  border: none !important;
}

.dropdown .el-scrollbar__view {
  box-shadow: none !important;
  border: none !important;
}

.dropdown .el-scrollbar {
  box-shadow: none !important;
  border: none !important;
}

.el-scrollbar__view .dropdown .el-scrollbar,
.dropdown .el-scrollbar__view,
.dropdown .el-dropdown__list,
.dropdown .el-dropdown__list,
.dropdown .el-popper__arrow::before,
.dropdown .el-popper {
  background-color: rgb(50, 53, 62) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 4px !important;
  outline: none !important;
}

.el-dropdown-menu,
.dropdown {
  background-color: rgb(50, 53, 62) !important;
  box-shadow: none !important;
}



.tipsdropdown {
  font-size: 14px !important;
  color: #b5bac8 !important;
  height: 36px;
  padding: 0px 20px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  opacity: 1;
  transition: all 0.3s;

  span {
    display: block;
    margin-right: 5px;
    color: #fff
  }
}

.opcity {
  opacity: 0;
}

.dropdown .el-dropdown-menu__item {
  border-bottom: 1px solid #4a4c53 !important;
  padding: 8px 20px !important;
}

.dropdown .el-dropdown-menu__item:nth-child(3) {
  border: none;
}

.itemdropdown {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;

  img {
    width: 16px !important;
    margin-right: 5px;
  }

  strong {
    font-size: 16px;
    font-weight: normal;
    color: #b5bac8;
    display: block;
    flex: 1;

  }

  >div {
    display: block !important;
    width: 60%;
    text-align: right !important;
    color: #b5bac8;
  }
}

.activedown {
  strong {
    color: #fff !important;
  }

  >div {
    color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
$navColor: #24262b;
$commonColor: rgb(32, 34, 38);
$fontSize: #afbcce;

.money {
  display: block;
  margin: 0 auto;
  height: 36px;
  color: #fff;
  background-color: #0a906c;
  border: none;
}

#nav {
  width: 100%;
  height: 100%;
  background-color: $commonColor;
  @include flex(row, space-between, center);
  padding: 0 10px;
  z-index: 1;

  .van-button {
    padding: 0;
  }

  :deep(.van-icon-wap-nav:before) {
    color: rgb(90, 95, 103);
    font-size: 32px;
  }

  >div:nth-child(1) {
    @include flex(row, flex-start, center);

    img:nth-child(1) {
      width: 23px;
    }

    img:nth-child(2) {
      width: 80.34px;

      margin-left: 10px;
    }
  }

  >div:nth-child(2) {
    @include flex(row, flex-end, center);

    .price {
      height: 30px;
      margin: 13px 0;
      outline: none;
      background-color: rgb(49, 53, 62);
      border-radius: 5px;
      @include flex(row, space-between, center);
      padding: 0 10px;

      div {
        @include flex(row, flex-start, center);

        img {
          width: 16px;
          margin-right: 5px;
        }

        span {
          font-size: 14px;
          color: #fff;
          display: block;
          margin-right: 5px;
        }
      }
    }

    >.reca {
      background-color: rgb(145, 108, 243);
      color: #fff;
      margin-left: 10px;
      height: 30px;
      @include flex(row, center, center);
      padding: 0 10px;
      border-radius: 5px;
    }

    >span {
      text-align: center;
      height: 25px;
      line-height: 25px;
      padding: 0 10px;
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
    }

    >span:nth-child(1) {
      background-color: #079590;
    }

    >span:nth-child(2) {
      background-color: #259a06;
      display: inline-block;
      margin-left: 10px;
    }
  }
}

.mark {
  @include flex(column, flex-start, flex-start);
  width: 80%;
  height: 100vh;
  position: fixed;
  left: -80%;
  top: 0;
  z-index: 9999999999;
  overflow-y: scroll;
  background-color: #1a1a1a;
  transition: all 0.2s;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    .logo {
      width: 100%;
      height: 60px;
      background-color: $commonColor;
      padding: 5px 20px;
      @include flex(row, flex-start, center);

      img {
        height: 36px;
      }
    }

    dl {
      width: 100%;
      background-color: transparent;

      dd {
        min-height: 40px;
        width: 100%;
        cursor: pointer;
        background-color: $commonColor;

        .van-icon {
          transition: all 0.5s;
        }

        .rotate {
          transform: rotate(180deg);
        }

        .top {
          width: 100%;
          height: 40px;
          padding: 0 20px;
          @include flex(row, space-between, center);

          div {
            height: 100%;
            @include flex(row, space-between, center);

            span {
              font-size: 14px;
              color: rgb(152, 167, 181);
            }

            .active {
              color: #fff;
            }

            img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
          }
        }

        .children {
          overflow: hidden;
          height: 0px;
          transition: all 0.5s;

          li {
            @include flex(row, flex-start, center);
            padding: 0 40px;
            cursor: pointer;

            div {
              @include flex(row, flex-start, center);

              img {
                width: 20px;
                height: 20px;
                margin-right: 10px;
              }

              span {
                color: rgb(152, 167, 181);
                font-size: 14px;
              }

              .activechild {
                color: #fff;
              }
            }

            height: 40px;
          }
        }

        .height11 {
          height: 440px;
          transform: all 0.5s;
        }

        .height2 {
          height: 80px;
          transform: all 0.5s;
        }

        .height5 {
          height: 200px;
          transform: all 0.5s;
        }

        .openchildren {
          height: auto;
        }
      }

      dd+dd {
        margin-top: 5px;
      }
    }
  }
}

.change {
  flex: 1;
  min-height: 40px;
  background-color: $commonColor;
  border-top: 1px solid #eee;
  width: 100%;
  padding-top: 20px;
  margin-top: 5px;
  @include flex(row, space-between, flex-start);
  padding: 10px 5px 10px 20px;

  .icon {
    margin: 3px 0 0 5px;
  }

  div {
    height: 40px;
    display: flex;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    span {
      color: #b5bac8;
      font-size: 14px;
    }
  }
}

.markwidth {
  left: 0;
}
</style>
